<template>
	<view class="radioGroup" :class="grid?'grid':''">
		<view class="radio" v-for="(o,index) in options" :key="index" 
		:class="(multiple?values.includes(o[valueKey]):values==o[valueKey])?'active':''" 
		@tap="setValue(o)">
			<text>{{o[labelKey]}}</text>
			<view class="ico">
				<image src="@/static/images/icon-gou.png" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"CheckboxGroup",
		props:{
			options:{
				type:Array,
				default:[]
			},
			value:{
				type:[Array,String,Number],
				default:[]
			},
			labelKey:{
				type:String,
				default:'label'
			},
			valueKey:{
				type:String,
				default:'value'
			},
			grid:{
				type:Boolean,
				default:true
			},
			disable:{
				type:Boolean,
				default:false
			},
			multiple:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				values:this.value
			};
		},
		methods:{
			setValue(option){
				const that=this;
				if(that.disable){return};
				if(that.multiple){
					if(that.values.includes(option[that.valueKey])){
						let index=that.values.indexOf(option[that.valueKey]);
						that.values.splice(index,1);
					}else{
						that.values.push(option[that.valueKey])
					};
					that.$emit('change',that.values);
				}else{
					if(that.values==option[that.valueKey]){return};
					that.values=option[that.valueKey];
					that.$emit('change',that.values);
				};
			}
		},
		watch:{
			
		}
	}
</script>

<style lang="scss" scoped>
	.radioGroup{
		.radio{
			position: relative;
			margin-right: 10rpx;
			flex: 0 0 auto;
			max-width: 100%;
			border: 2rpx solid #f9f6f0;
			background: #f9f6f0;
			border-radius: 10rpx;
			overflow: hidden;
			min-width: 126rpx;
			line-height: 56rpx;
			text-align: center;
			font-size: 24rpx;
			color: #65554d;
			.ico{
				position: absolute;
				right: 0;
				bottom: 0;
				z-index: 5;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding-left: 10rpx;
				padding-top: 18rpx;
				visibility: hidden;
				&:after{
					content: "";
					position: absolute;
					bottom: 0;
					right: 0;
					border-left: 40rpx solid transparent;
					border-bottom: 40rpx solid #fe9c29;
					z-index: -1;
				}
				image{
					display: block;
					width: 20rpx;
					height: 14rpx;
				}
			}
			&:last-child{
				margin-bottom: 0;
			}
			&.active{
				border-color: #fe9c29;
				color: #fe9c29;
				.ico{
					visibility: visible;
				}
			}
		}
		&.grid{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			.radio{
				margin-right: 10rpx;
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
</style>